/**
 * 选项卡组件
 * =============
 * 支持的功能
 * 1、tab元素超出显示区域，支持左右滚动
 * 2、点击某个选项卡，会出发一个selectTab的事件，并将点击的选项卡对应的数据返回
 * =============
 * 属性
 * 1、list：
 * 2、fixTop： 是否吸顶
 * =============
 * 未来支持的特性
 * 1、内容区域支持左右滑动
 */

Component({
    properties: {
        list: { // 选项卡列表数据。每个元素包含id、title属性
            type: Array
        },
        fixTop: { // 是否吸顶
            type: Boolean,
            value: false
        },
        isShowAll: { // 是否显示全部
            type: Boolean,
            value: false
        },
        selectId: { // 默认选中的页卡
            type: Number,
            value: 0,
            observer: function (newVal, oldVal) {
                this.setData({
                    currentTab: newVal
                });
            }
        }
    },
    data: {
        currentTab: 0
    },
    ready: function () {
        // this.data.currentTab = this.properties.selectId;
        this.handleSwichTab();
    },
    methods: {
        handleSwichTab: function (e) {
            let curTab;
            let _props = this.properties;
            if (e) {
                curTab = e.target.dataset.current;
            } else {
                curTab = this.properties.selectId;
            }

            if (this.data.currentTab === curTab) {
                return false;
            } else {
                this.setData({
                    currentTab: curTab
                });
            }
            let find = false;
            for (let i = 0; i < _props.list.length; i++) {
                if (_props.list[i].tagId === curTab) {
                    find = true;
                    this.triggerEvent('selectTab', {..._props.list[i]});
                }
            }
            if (!find) {
                this.triggerEvent('selectTab', {});
            }
        }
    }
});
